<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles/styles.css">
  <title>Document</title>
  <style>




  </style>
</head>

<body>
  <div>
    <form action="#">
      <label class="label-text">
        <span>姓名: </span>
        <input type="text" placeholder="请输入姓名" required></input>
      </label>
      <br>
      <label>
        <span>密码: </span>
        <input type="password" placeholder="请输入密码" required>
      </label>
      <br>
      <span>性别: </span>
      <label><input type="radio" name="sex" required> <span>男</span> </label>
      <label><input type="radio" name="sex" required> <span>女</span> </label>
      <br>
      <span>爱好: </span>
      <label><input type="checkbox" required>打游戏</label>
      <label><input type="checkbox" required>看电影</label>
      <br>
      <span>介绍</span>
      <textarea name="" id="" placeholder="自我介绍" required></textarea>
      <button>登录</button>
      <button>重置</button>
    </form>
  </div>

  <span>普通span</span>
  <div>
    <span>后代span</span>
    <h1>真h1</h1>
    <a href="#">
      <h1>250</h1>
    </a>
    <p>
      从测试结果可以看出，使用LazyForEach懒加载后，相关指标已经得到大幅度提高，尤其是内存和首次渲染时间。其他优化方式可以进一步减少滑动过程的中丢帧率，优化交互体验。缓存数据项，因为缓存加载的数据未在首屏展示，所以对首次渲染时间有影响，但是因为需要加载多余的数据，所以内存会比没使用缓存数据项的多。因为UI组件的复用，所以内存比没有使用组件复用少很多。

      最后，对于瀑布流性能优化方式，整体与长列表优化类似，都可以使用懒加载、缓存列表项、动态预加载、组件复用、布局优化等方式优化性能。固定宽高作为瀑布流特有的优化性能手段能够进一步提升瀑布流的性能，同时可以避免新加载元素瞬间刷新带来的"闪烁"问题。在滑动过程中加载数据，可以避免同一时间创建大量组件而导致丢帧的情况。相应技术总结见下表：
    </p>
  </div>
















  
  <script>
    const span = document.querySelectorAll('span')
    span.forEach((item) => {
      item.addEventListener('mouseenter', function () {
        this.style.color = 'red'
      })
    })



  </script>
</body>

</html>